<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        dt {
            background-color: #b8c1c8;
            color: white;
            padding: 0 10px;
            margin-top: 20px;
            border: 1px solid black;
            position: sticky;
            top: 0;
        }
        
        dd {
            font-size: 20px;
            font-weight: 900px;
            border-bottom: 1px solid #ccc;
            margin: 20px 0;
            padding: 0 0 0 12px;
            white-space: nowrap;
            font-weight: 700;
        }
        
        .one dd:last-child {
            border: 0;
        }
    </style>
</head>

<body>
    <div>
        <div class="one">
            <dl>
                <dt>A</dt>
                <dd>Andrew W.K.</dd>
                <dd>Apparat</dd>
                <dd>Arcade Fire</dd>
                <dd>At The Drive-In</dd>
                <dd>Aziz Ansari</dd>
            </dl>
        </div>
        <div class="one">
            <dl>
                <dt>C</dt>
                <dd>Chromeo</dd>
                <dd>Common</dd>
                <dd>Converge</dd>
                <dd>Crystal Castles</dd>
                <dd>Cursive</dd>
            </dl>
        </div>
        <div class="one">
            <dl>
                <dt>E</dt>
                <dd>Explosions In The Sky</dd>
            </dl>
        </div>
        <div class="one">
            <dl>
                <dt>T</dt>
                <dd>Ted Leo & The Pharmacists</dd>
                <dd>T-Pain</dd>
                <dd>Thrice</dd>
                <dd>TV On The Radio</dd>
                <dd>Two Gallants</dd>
            </dl>
        </div>
    </div>
</body>

</html>